<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				perspective: 800px;
				/*视点位置*/
				/*perspective-origin: 0% 0%;*/
			}
			#box{
				width: 500px;
				height: 400px;
				margin: 80px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: hd 10s infinite linear;
			}
			@-webkit-keyframes hd{
				from{transform: rotateY(0deg) rotateX(0deg);}
				to{transform: rotateY(360deg) rotateX(360deg);}
			}
			.f{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 150px;
				top: 100px;
				transform-style: preserve-3d;
			}
			.f:nth-of-type(1){
				background: rgba(255,0,0,0.2);
				transform: translateZ(100px);
			}
			.f:nth-of-type(2){
				background: rgba(0,255,0,0.2);
				transform: translateZ(-100px);
			}
			.f:nth-of-type(3){
				background: rgba(0,0,255,0.2);
				transform: translateZ(100px) rotateY(90deg);
				transform-origin: left;
			}
			.f:nth-of-type(4){
				background: rgba(255,108,0,0.2);
				transform: translateZ(100px) rotateY(-90deg);
				transform-origin: right;
			}
			.f:nth-of-type(5){
				background: rgba(255,240,0,0.2);
				transform: translateZ(100px) rotateX(-90deg);
				transform-origin: top;
			}
			.f:nth-of-type(6){
				background: rgba(0,24,255,0.2);
				transform: translateZ(100px) rotateX(90deg);
				transform-origin: bottom;
			}
			
			
			
			
			#box_son{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 200px;
				top: 150px;
				transform-style: preserve-3d;
				/*background-color: black;*/
				transform-style: preserve-3d;
				animation: hd2 5s infinite linear;
			}
			@-webkit-keyframes hd2{
				from{transform: rotateY(360deg) rotateX(360deg);}
				to{transform: rotateY(0deg) rotateY(360deg);}
			}
			.d{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			.d:nth-of-type(1){
				background: rgba(255,0,0,0.35);
				transform: translateZ(50px);
			}
			.d:nth-of-type(2){
				background: rgba(0,255,0,0.35);
				transform: translateZ(-50px);
			}
			.d:nth-of-type(3){
				background: rgba(0,0,255,0.35);
				transform: translateZ(50px) rotateY(90deg);
				transform-origin: left;
			}
			.d:nth-of-type(4){
				background: rgba(255,108,0,0.35);
				transform: translateZ(50px) rotateY(-90deg);
				transform-origin: right;
			}
			.d:nth-of-type(5){
				background: rgba(255,240,0,0.35);
				transform: translateZ(50px) rotateX(-90deg);
				transform-origin: top;
			}
			.d:nth-of-type(6){
				background: rgba(0,24,255,0.3);
				transform: translateZ(50px) rotateX(90deg);
				transform-origin: bottom;
			}
			
			
			
			#box_son_son{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 25px;
				top: 25px;
				/*background-color: black;*/
				transform-style: preserve-3d;
				animation: hd3 5s infinite linear;
			}
			@-webkit-keyframes hd3{
				from{transform: rotateY(0deg) rotateX(360deg);}
				to{transform: rotateY(360deg) rotateY(0deg);}
			}
			.a{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			.a:nth-of-type(1){
				background: rgba(255,0,0,0.8);
				transform: translateZ(25px);
			}
			.a:nth-of-type(2){
				background: rgba(0,255,0,0.8);
				transform: translateZ(-25px);
			}
			.a:nth-of-type(3){
				background: rgba(0,0,255,0.8);
				transform: translateZ(25px) rotateY(90deg);
				transform-origin: left;
			}
			.a:nth-of-type(4){
				background: rgba(255,108,0,0.8);
				transform: translateZ(25px) rotateY(-90deg);
				transform-origin: right;
			}
			.a:nth-of-type(5){
				background: rgba(255,240,0,0.8);
				transform: translateZ(25px) rotateX(-90deg);
				transform-origin: top;
			}
			.a:nth-of-type(6){
				background: rgba(0,24,255,0.8);
				transform: translateZ(25px) rotateX(90deg);
				transform-origin: bottom;
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="f"></div>
			<div class="f"></div>
			<div class="f"></div>
			<div class="f"></div>
			<div class="f"></div>
			<div class="f"></div>
			<div id="box_son">
				<div class="d"></div>
				<div class="d"></div>
				<div class="d"></div>
				<div class="d"></div>
				<div class="d"></div>
				<div class="d"></div>
				<div id="box_son_son">
					<div class="a"></div>
					<div class="a"></div>
					<div class="a"></div>
					<div class="a"></div>
					<div class="a"></div>
					<div class="a"></div>
				</div>
			</div>
		</div>
	</body>
</html>
